<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="../../../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${path }/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

   <!-- Data Tables -->
    <link href="${path }/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="${path }/css/animate.min.css" rel="stylesheet">
    <link href="${path }/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<link href="${path }/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
	<link href="${path }/css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">
	
	<script  type="text/javascript">  
 
 	</script>
	
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>${listName!""}列表</h5>
                         <div class="ibox-tools">
                        	<a href="javascript:void(0)" onclick="location.reload()">
                                <i class="glyphicon glyphicon-refresh"></i>
                            </a>
                        
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                    	<div class=" pull-right input-group" >
		                    <%-- <form class="form-inline" method="post" id="form" action="/pc/${lowercaseBean}/list.do?pageNumber=${pageNumber}">
		                    	 <div class="control-group">
		                    		<div class=" pull-right" >
			                   	 		<input type="text" name="${search!""}" value="${search}" style="width:250px" class="input-xlarge"/> 
										<button type="submit" class="btn">搜索</button>
									</div>
									<div style="clear:both"></div>
		                    	</div>
		                    </form> --%>
                    	</div>
						<div class="pull-left">
							<button  class=" btn btn-primary"   id="add"       data-target="#addModal">     &nbsp;&nbsp;&nbsp;&nbsp;新增&nbsp;&nbsp;&nbsp;&nbsp;    </button>
							<button  class=" btn btn-primary"   id="update"  data-target="#updateModal">     &nbsp;&nbsp;&nbsp;&nbsp;修改&nbsp;&nbsp;&nbsp;&nbsp;   </button>
							<button  class=" btn btn-primary"   id="view"   data-target="#viewModal">     &nbsp;&nbsp;&nbsp;&nbsp;查看&nbsp;&nbsp;&nbsp;&nbsp;   </button>
							<button  class=" btn btn-danger"   id="delete"  onclick="delSel()">     &nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;   </button>
						</div>
						<br/>
                        <table class="table table-striped table-bordered table-hover dataTables-example"  id="type">
	        				
	                            <thead>
	                                <tr>
                                	<#list listCaptions?keys as vaule>
                               		 <#if listCaptions[vaule]=="主键">  
		                                  	<th hidden>${listCaptions[vaule]!("null")}</th>
	                                 <#else>
	                                 		<th>${listCaptions[vaule]!("null")}</th>
                                   	 </#if>
                                    	
                                    </#list>	
	                                </tr>
	                            </thead>
	                            <tbody>
	                            	<c:forEach items="${page}" var="bean">
		                                <tr class="gradeA">
                               <#list listCaptions?keys as vaule>
                               	<#list fields?keys as field>
                               			<#if fields[field]==vaule>
			                                  <#if field=="seqId">  
			                                  	<td hidden name="${field }">${vaule!""}</td>
			                                  <#else> 
			                                  	<td name="${field }">${vaule!""}</td>
			                                  </#if>
		                                 </#if> 
                                 </#list>
                               </#list>    
		                                </tr>
		                            </c:forEach>
	                            </tbody>
                        </table>
							<ul id="page"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
	 <!-- 模态框（Modal） -->
	<div class="modal fade"     id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog"  style="width:60%">
	       <div class="modal-content">
	       </div> 
	   </div>
	</div>
	 <!-- 模态框（Modal） -->
	<div class="modal fade"     id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog"  style="width:60%">
	       <div class="modal-content">
	       </div> 
	   </div>
	</div>
	 <!-- 模态框（Modal） -->
	<div class="modal fade"     id="viewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog"  style="width:60%">
	       <div class="modal-content">
	       </div> 
	   </div>
	</div>
    
    
    
    <script src="${path }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${path }/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${path }/js/plugins/jeditable/jquery.jeditable.js"></script>
    <script src="${path }/js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="${path }/js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="${path }/js/content.min.js?v=1.0.0"></script>  
    <script src="${path }/js/bootstrap-paginator.js"></script>
    <script src="${path }/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="${path }/js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
    <script type="text/javascript">
	    function submit()
	    {
	        var form=document.getElementById("form");
	        form.submit();
	    }
    
		//新增
	     $("#add").click(function(){  
	    	 $("#addModal").modal({
	 	   		remote:"/pc/${lowercaseBean}/toInput.do",
	 	   		backdrop:"static",
	 	   		keyboard:true
	 	    },"show");
	    })  
	     //修改
	    $("#update").click(function(){  
	    	var ids = [];
	    	 $.each($("#type input[type=checkbox][name!='checkAll']:checked"),function(){
	    		 var tr=$(this).parents("tr");
	    		 var seq=tr.eq(0).find("td[name='seqId']");
	    		 ids.push(seq[0].innerHTML);
	          });
	    	 if(ids.length>0){
		    	if(ids.length==1){
		    	    $("#updateModal").modal({
			 	   		remote:"/pc/${lowercaseBean}/toInput.do?id="+ids[0],
			 	   		backdrop:"static",
			 	   		keyboard:true
			 	    },"show");
		    	}else{
		    		alert("只能编辑一条数据！");
		    	}
	    	 }else{
	    		 alert("请选择一条数据！");
	    	 }
	    })   
	     
	    //查看
	    $("#view").click(function(){  
	    	var ids = [];
	    	 $.each($("#type input[type=checkbox][name!='checkAll']:checked"),function(){
	    		 var tr=$(this).parents("tr");
	    		 var seq=tr.eq(0).find("td[name='seqId']");
	    		 ids.push(seq[0].innerHTML);
	          });
	    	 if(ids.length>0){
		    	if(ids.length==1){
		    		 $("#viewModal").modal({
		 	 	   		remote:"/pc/${lowercaseBean}/toView.do?id="+ids[0],
		 	 	   		backdrop:"static",
		 	 	   		keyboard:true
		 	 	    },"show");
		    	}else{
		    		alert("只能查看单条数据！");
		    	}
	    	 }else{
	    		 alert("请选择一条数据！");
	    	 }
	    })  

	    //获取选中行的id
	  /*   $("#type tr").click(function(){
	    	
			alert($(this).find("name:seqId").val());
		}) */
	    //批量删除
		function delSel(){
	    	var ids = [];
	    	//var checks=$("#type input:checkbox:checked");	    	
	    	 $.each($("#type input[type=checkbox][name!='checkAll']:checked"),function(){
	    		 var tr=$(this).parents("tr");
	    		 var seq=tr.eq(0).find("td[name='seqId']");
	    		 ids.push(seq[0].innerHTML);
	          });
	    	var id;
	    	
	    	 if(ids.length>0){
	    		if(confirm("确认删除吗？")){
	    			 /* if(ids<1){
	    	    		 id=ids[0];
	    	    	 } */
	    			//提交
	            	$.ajax({
	            		url:"/pc/${lowercaseBean}/delete.do?ids="+ids,
	            		data:{'id':id,'ids':ids},
	            		dataType:'json',
	            		type:'post',
	            		//返回json数据
	            		success:function(data){
	            			if(data.code=='0'){
	            				alert(data.msg);
	            				window.location.reload();//刷新当前页面
	            			}else{
	            				alert(data.msg);
	            			}
	            		},
	            		error:function(data){
	            			alert(data.msg);
	            		}
	            	});
	    		}
	    	 }else{
	    		 alert("请选择一条数据！");
	    	 }
		}
		
		$("#typeId").change(function(){
			$("#form").submit();			
		});
		
    </script>
    
    
    
    
	<script type="text/javascript">
	$(document).ready(function() {
		var $thr = $('table thead tr');  
        var $checkAllTh = $('<th width="10%"><input type="checkbox"  name="checkAll" />全选</th>');  
        /*将全选/反选复选框添加到表头最前，即增加一列*/  
        $thr.prepend($checkAllTh);  
        /*var $tfr = $('table tfoot tr');  
        var $checkAllTf = $('<th width="6%"><input type="checkbox"  name="checkAll" />全选</th>'); */
        /*将全选/反选复选框添加到表尾最前，即增加一列*/  
       // $tfr.prepend($checkAllTf); 
        
        /*“全选/反选”复选框*/  
        var $checkAll = $thr.find('input');  
        $checkAll.click(function(event){  
            /*将所有行的选中状态设成全选框的选中状态*/  
            $tbr.find('input').prop('checked',$(this).prop('checked'));  
            /*并调整所有选中行的CSS样式*/  
            if ($(this).prop('checked')) {  
                $tbr.find('input').parent().parent().addClass('warning');  
            } else{  
                $tbr.find('input').parent().parent().removeClass('warning');  
            }  
            /*阻止向上冒泡，以防再次触发点击操作*/  
            event.stopPropagation();  
        });  
        /*点击全选框所在单元格时也触发全选框的点击操作*/  
        $checkAllTh.click(function(){  
            $(this).find('input').click();  
        });  
        var $tbr = $('table tbody tr');  
        var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');  
        /*每一行都在最前面插入一个选中复选框的单元格*/  
        $tbr.prepend($checkItemTd);  
        /*点击每一行的选中复选框时*/  
        $tbr.find('input').click(function(event){  
            /*调整选中行的CSS样式*/  
            $(this).parent().parent().toggleClass('warning');  
            /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/  
            $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);  
            /*阻止向上冒泡，以防再次触发点击操作*/  
            event.stopPropagation();  
        });  
        /*点击每一行时也触发该行的选中操作*/  
        $tbr.click(function(){  
            $(this).find('input').click();  
        });  
		
		
		//分页框和搜索框
	   /*  $(".dataTables-example").dataTable();
	    oTable.$("td").editable("", {
	        "callback": function(sValue, y) {
	            var aPos = oTable.fnGetPosition(this);
	            oTable.fnUpdate(sValue, aPos[0], aPos[1])
	        },
	        "submitdata": function(value, settings) {
	            return {
	                "row_id": this.parentNode.getAttribute("id"),
	                "column": oTable.fnGetPosition(this)[2]
	            }
	        },
	        "width": "90%",
	        "height": "100%"
	    }) */
	    
      //分页
       	var currentPage =${pageNumber};//当前页数
        var totalPages =${totalPages};//总页数
        $("#page").bootstrapPaginator({
            bootstrapMajorVersion: 3, //对应的bootstrap版本
            currentPage: currentPage, //当前页数
            numberOfPages: 10, //每次显示页数
            totalPages: totalPages, //总页数
            shouldShowPage: true, //是否显示该按钮
            useBootstrapTooltip: true,
            itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function(event, originalEvent, type, page) {
            	 location.href = "/pc/${lowercaseBean}/list.do?pageNumber=" + page;
            	
            }
        });
	   
	    
	    
	});
  </script>  
  
</body>
</html>